<template>
    <div class="window1" v-if="videoType === 'video1'">
        实时视频1：<DHPlayer videoId="testPlayer" ref="video1" :pathList="pathList" :shieldClass="['test_drop']"
            @getCurrentWindow="getCurrentWindow" @changeDivision="getDivisionNum" @picCap="picCap" @getError="getError">
        </DHPlayer>
    </div>
</template>
<script>
import DHPlayer from "@/utils/DHPlayer"
export default {
    components: {
        DHPlayer
    },
    data() {
        return {
            activeKey: '1',
            showModal: false,
            path: '',
            path2: '',
            path3: '',
            startDownload: false,
            videoType: 'video1',
            currentNum: 0,
            errorTip: '',
            pathList: ['rtsp://192.168.111.2:9090/dss/monitor/params?cameraid=1000000%240&substream=1&trackID=701 ',
                {
                    path: 'rtsp://10.35.238.43:9100/dss/monitor/param/cameraid=1009412$1$0$1%240%26substream=1?token=105',
                    redirect: false
                },
            ], //实时预览测试
            realTimeList: [{
                channelId: '1000032$1$0$0'
            }],
            pathList2: [{ //录像测试
                startTime: 1636994047,
                endTime: 1637001247,
                path: 'rtsp://10.35.239.250:9090/dss/playback/param?cameraid=1000544%240&substream=1&type=2&recordtype=1&begintime=1636994047&endtime=1637001247',
            }],
            videoPlayList: [{
                "channelId": "1000014$1$0$0",
                "streamType": "1",
                "type": "hls",
                "recordType": "1",
                "startTime": '1637715062',
                "endTime": '1637769062',
                "recordSource": "2"
            }],
            enableDrag: true,
            divisionNum: 4, // 当前窗口的分割数量
            isRedirect: false, // true 是代表重定向(拼接的)  false 表示取消重定向(接口返回)
            audioType: '0',
            audioBit: '8',
            sampleRate: '8000',
            talkType: '1'
        }
    },
    watch: {
        videoType(val, oldVal) {
            this.currentNum = 0
            this.$nextTick(() => {
                this.$refs[val].initVideo()
            })
        }
    },
    methods: {
        getError(error) {
            this.errorTip = error
        },
        replay(snum) { //录像回放播放结束监听，demo中是重新再放一遍，用户可根据自身需求使用改方法
            this.$refs[this.videoType].setPlayback(this.pathList2[snum], snum)
        },
        //修改url
        changeUrl() {
            // 选中窗口
            this.$refs[this.videoType].videoPlayer.chooseWindow(this.currentNum)
            if (this.videoType === 'video1') {
                this.pathList[0] = this.path
                this.$refs[this.videoType].setRealTime({ path: this.path, snum: this.currentNum, redirect: this.isRedirect })
            }
            if (this.videoType === 'video2') {
                this.pathList2[0] = { url: this.path2 }
                this.$refs[this.videoType].setPlayback({ path: this.path2, redirect: this.isRedirect }, this.currentNum)
            }
        },
        // 对讲
        setTalk() {
            this.$refs[this.videoType].setTalk({
                path: this.path3,
                audioType: this.audioType, // 音频类型 int  0-default 1-PCM 2-G711a 3-AMR 4-G711U 5-G726 6-AAC 7-G722 8-G711
                audioBit: this.audioBit, // 位数 int   8  16 
                sampleRate: this.sampleRate, // 采样频率  8000 16000 32000 48000 8192
                talkType: this.talkType // 对讲类型： 1 设备  2通道
            }, this.currentNum)
        },
        // 控件切换窗口数量时返回前端告知当前多少窗口
        getDivisionNum(v) {
            this.divisionNum = v
        },
        // 修改当前控件展示的窗口数量
        changeDivision() {
            this.$refs[this.videoType].changeDivision(this.divisionNum)
        },
        //本地录像下载
        download() {
            this.startDownload = !this.startDownload
            this.$refs[this.videoType].videoPlayer.localRecordDownload(this.currentNum)
        },
        downloadFile(url, name = new Date().valueOf()) {
            var a = document.createElement("a")
            a.setAttribute("href", url)
            a.setAttribute("download", name)
            a.setAttribute("target", "_blank")
            let clickEvent = document.createEvent("MouseEvents");
            clickEvent.initEvent("click", true, true);
            a.dispatchEvent(clickEvent);
        },
        picCap({
            path
        }) {
            this.downloadFile(path, 'image_' + new Date().valueOf())
        },
        //关闭、开启声音
        openAudio(state) {
            this.$refs[this.videoType].videoPlayer.openAudio({
                snum: this.currentNum,
                videoType: this.videoType === 'video1' ? 0 : 1,
                isEnable: state ? 1 : 0
            })
        },
        //抓图
        snapshot() {
            this.$refs[this.videoType].videoPlayer.snapshot(this.currentNum)
        },
        //获取当前选中的窗口
        getCurrentWindow(num) {
            this.currentNum = num
        },
        //关闭视频
        closeVideo() {
            this.$refs[this.videoType].videoPlayer.closeVideo({
                snum: this.currentNum,
                isAll: false
            })
        },
        //录像暂停
        pauseVideo() {
            this.$refs[this.videoType].videoPlayer.controlPlayback({
                snum: this.currentNum,
                state: 0
            })
        },
        //继续录像
        continueVideo() {
            this.$refs[this.videoType].videoPlayer.controlPlayback({
                state: 1
            })
        },
        //销毁窗口
        destroy() {
            this.$refs[this.videoType].destroy()
        },
        //重建
        init() {
            this.$refs[this.videoType].initVideo()
        },
        // 设置全屏
        setFullScreen() {
            this.$refs[this.videoType].setFullScreen()
        },
        // 是否开启拖拽
        setDragEnable(value) {
            this.$refs[this.videoType].setDragEnable(value)
        },
    }
}
</script>
<style>
.window1,
.window2 {
    float: left;
    margin-top: 20px;
    margin-left: 20px;
}

#videoBox {
    margin-left: 20px;
}

#videoBox button {
    margin-left: 10px;
    margin-bottom: 10px;
}


.error-tip {
    clear: both;
    color: red;
    margin-left: 20px;
}

#testPlayer,
#testPlayer2 {
    width: 500px;
    height: 500px;
    border: 1px solid #000;
}
</style>
